<template>
    <div class="page-main MHCheck">
        <DataTable
            ref="MHCheckDataTableRef"
            :data="list"
            :hasAdd="false"
            :hasFilter="true"
            :hasCheckbox="false"
            :page-index="pageInfo.pageIndex"
            :page-size="pageInfo.pageSize"
            :total-count="pageInfo.totalCount"
            @page-change="onPageChange"
            @search-filter="onSearchFilter" 
            @clear-filter="onClearFilter"
            v-bind="$attrs">
            <vxe-column title="设备ID" min-width="100" show-overflow>
                <template #default="{ row }"> 
                    {{ row.deviceID || "-" }} </template>
            </vxe-column>
                        
            <vxe-column title="钢丝绳类型" min-width="100" show-overflow>
                <template #default="{ row }">
                    {{ row.wireropeType || "-" }}
                </template>
            </vxe-column>

            <vxe-column title="钢丝绳编号" min-width="100" show-overflow>
                <template #default="{ row }"> 
                    {{ row.wireropeSN || "-" }} </template>
            </vxe-column>

            <vxe-column title="钢丝绳直径" min-width="50" show-overflow>
                <template #default="{ row }">
                    {{ row.diameter || "-" }}
                </template>
            </vxe-column>

            <vxe-column title="公司" min-width="100" show-overflow>
                <template #default="{ row }"> 
                    {{ row.company || "-" }} </template>
            </vxe-column>

            <vxe-column title="负责人" min-width="100" show-overflow>
                <template #default="{ row }"> 
                    {{ row.responsiblePerson }} </template>
            </vxe-column>

            <vxe-column title="报告名" min-width="100" show-overflow>
                <template #default="{ row }"> 
                    {{ row.reportName || "-" }} </template>
            </vxe-column>
            <vxe-column title="检测时间" min-width="120" show-overflow>
                <template #default="{ row }">
                    {{ formatTime(row.checkTime) }} </template>
            </vxe-column>
            
            <vxe-column title="状态" min-width="80" show-overflow>
                <template #default="{ row }"> 
                    {{ row.state || "-" }} </template>
            </vxe-column>

            <vxe-column title="内容" min-width="200" show-overflow>
                <template #default="{ row }"> 
                    {{ row.content || "-" }} </template>
            </vxe-column>

            <template #otherFilter>
                <el-input class="placeholder-center" v-model="deviceId" type="number" 
                  min="1" :precision="0" placeholder="设备ID" clearable/>
            </template>

            <!-- 高级搜索内容 -->
            <template #Advfilter>
                <el-form v-model="filterModel" label-position="top" @submit.prevent>
                    <el-form-item label="检测日期" prop="CheckDate">
                        <el-date-picker style="width: 300px !important" v-model="CheckDate" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期" clearable value-format="YYYY-MM-DD" format="YYYY-MM-DD"> </el-date-picker>
                    </el-form-item>
                </el-form>
            </template>
            <template #rightBtn>
                <el-button-group>
                    <el-button type="warning" @click="onExport">导出</el-button>
                </el-button-group>
            </template>
        </DataTable>
    </div>
</template>

<script lang="ts" setup>
import LAY_EXCEL from "lay-excel";
import Enums from "@/gx/Enums";
import Gx from "@/gx/Gx";
import { TipsType } from "@/_gx/TsEnums";

/********************************************** 接收参数 **********************************************/
//搜索条件
const filterModel = ref<any>({});
/********************************************** 列表相关定义 **********************************************/

//表格的数据
const list = ref([]);

//申请时间
const CheckDate = ref<any>();

//分页信息
const pageInfo = reactive({
    pageIndex: 1,
    pageSize: 20,
    totalCount: 0,
    orderBy: "[MHCheckID] DESC",
});

//搜索条件空对象的json字符串，用于清空搜索条件时使用
const filterModelJson = Gx.SerializeObject(filterModel.value);

//DataTable对象，使用此对象来调用DataTable组件中抛出的属性或方法
const MHCheckDataTableRef = ref(null);

/********************************************** 列表方法与事件 **********************************************/

//页面加载
onMounted(() => {
    Init();
});

//初始化
const Init = () => {
    GetPage();
};

//分页方法
const GetPage = () => {
    let _data = {};

    MergeObjs(_data, filterModel.value);

    App.CallApi(Api.MHCheck.GetPage(pageInfo.pageIndex, pageInfo.pageSize, pageInfo.orderBy), {
        data: _data,
        success: (res: any) => {
            list.value = res.items;
            pageInfo.totalCount = res.totalCount;

            //在这里抛出一个事件，用来处理当此组件用于选择弹框时数据回显的选中功能
            emits("setSelectData");
        },
    });
};

//分页改变
const onPageChange = (data: any) => {
    pageInfo.pageIndex = data.currentPage;
    pageInfo.pageSize = data.pageSize;
    GetPage();
};

//高级搜索点击搜索按钮
const onSearchFilter = () => {
    pageInfo.pageIndex = 1;
    if (!Gx.IsEmpty(CheckDate.value) && CheckDate.value.length == 2) {
        filterModel.value._CheckTime_Begin = Math.floor(new Date(CheckDate.value[0] + 'T00:00:00Z').getTime() / 1000);
        filterModel.value._CheckTime_End = Math.floor(new Date(CheckDate.value[1] + 'T23:59:59Z').getTime() / 1000);
    } else {
        filterModel.value._CheckTime_Begin = null;
        filterModel.value._CheckTime_End = null;
    }
    GetPage();
};

//高级搜索点击清空按钮
const onClearFilter = () => {
    CheckDate.value = [];
    filterModel.value = Gx.DeserializeObject(filterModelJson);
    pageInfo.pageIndex = 1;
    GetPage();
};

const deviceId = computed({
  get: () => filterModel.value._DeviceID ?? null,
  set: (val) => {
    filterModel.value._DeviceID = val ? Number(val) : null
  }
})

const onExport = async () => {
    let _data = {};

    MergeObjs(_data, filterModel.value);

    let dataList;
    await App.CallApi(Api.MHCheck.GetPage(1, 9999999, pageInfo.orderBy), {
        data: _data,
        success: (res: any) => {
            for (var i = 0; i < res.items.length; i++) {
                res.items[i].index = i + 1;
            }

            dataList = res.items;
        },
    });

    // 数据
    dataList = LAY_EXCEL.filterExportData(dataList, {
        index: "index",
        deviceID: "deviceID",
        wireropeType: "wireropeType",
        wireropeSN: "wireropeSN",
        diameter: "diameter",
        company: "company",
        responsiblePerson: "responsiblePerson",
        reportName: "reportName",
        checkTime: (value) => { 
            return value? formatTime(value) : "" 
        },
        state: "state",
        content: "content"
    });
    
    // 表头
    dataList.unshift({
        index: "序号",
        deviceID: "设备ID",
        wireropeType: "钢丝绳类型",
        wireropeSN: "钢丝绳编号",
        diameter: "钢丝绳直径",
        company: "公司",
        responsiblePerson: "负责人",
        reportName: "报告名",
        checkTime: "检测时间", 
        state: "状态",
        content: "内容",
    });
        
    //设置单元格居中、边框
    const rows = `A1:K${dataList.length}`;
    LAY_EXCEL.setExportCellStyle(dataList, rows, {
        s: {
            alignment: {
                wrapText: true,
                horizontal: "center",
                vertical: "center",
            },
            border: {
                top: { style: "thin", color: { rgb: "FF000000" } },
                bottom: { style: "thin", color: { rgb: "FF000000" } },
                left: { style: "thin", color: { rgb: "FF000000" } },
                right: { style: "thin", color: { rgb: "FF000000" } },
            },
        },
    });
    
    //配置列宽
    const colConf = LAY_EXCEL.makeColConfig({ A: 40, E:50, K:300 }, 100);

    //导出
    LAY_EXCEL.exportExcel({ Sheet1: dataList }, `钢丝绳在线检测报告.xlsx`, "xlsx", { extend: { "!cols": colConf } });
    
};
/********************************************** 时间格式化 **********************************************/
const timeFormatCache = ref({});
const formatTime = (timestamp: number) => {
  if (!timestamp) {
    return "-";
  }
  if (timeFormatCache.value[timestamp]) {
    return timeFormatCache.value[timestamp];
  }
  const formattedTime = new Date(timestamp * 1000).toLocaleString();
  timeFormatCache.value[timestamp] = formattedTime;
  return formattedTime;
};

/********************************************** 列表按钮功能 **********************************************/
//向上抛出的事件与方法
const emits = defineEmits(["setSelectData"]);
defineExpose({ MHCheckDataTableRef });
</script>

<style lang="scss" scoped>
.icon-gangsishengbaojing {
    font-size: 32px;
}
.greenLight {
    color: #67c23a;
}
.blueLight {
    color: #409eff;
}
.yellowLight {
    color: #f4ea2a;
}
.orangeLight {
    color: #fea821;
}
.grayLight {
    color: #909399;
}
</style>
